<template>
	<view class="time-set">
		<view class="calendar">
			<!-- 插入模式 -->
			<uni-calendar class="uni-calendar--hook" :selected="info.selected" :showMonth="false" @change="change" @monthSwitch="monthSwitch" />
		</view>
		<view class="ban">
			时段设置(共 {{info.selected.length}} 天可约)
		</view>
		<view class="bans ban">
			<view class="time">
				<text>{{ currentDate }} ( {{weekday}} )</text>
				<uni-icons type="gear" size="20"></uni-icons>
			</view>
			<view class="time-list">
				<view class="list-item" v-for="(item,index) in timeList" :key="index">
					<view class="left">
						<text>{{item.start}}</text> ~ <text>{{item.end}}</text>
					</view>
					<view class="right">
						<uni-icons type="trash" size="30" @click="delTime(index)"></uni-icons>
						<switch checked="true" @change="changeTime(index)" style="transform:scale(0.7)" :checked="item.status" />
					</view>
				</view>
			</view>
			<view class="set" @click="addTime">
				<text>+ 添加时段</text>
			</view>
		</view>
		<view class="btns">
			<view class="back" @click="goBack">
				不保存，返回
			</view>
			<view class="save" @click="saveTime">
				保存时间设置
			</view>
		</view>
		<!-- 弹框 -->
		<PopupCom ref="popup" @confirm-popup="confirm">
			<view class="time-box">
				<view class="start df">
					<text>开始时间:</text> <uni-data-select v-model="start" :localdata="range" @change="changeTimeStart"></uni-data-select>
				</view>
				<view class="end df">
					<text>结束时间:</text> <uni-data-select v-model="end" :localdata="range" @change="changeTimeEnd"></uni-data-select>
				</view>
			</view>
		</PopupCom>
	</view>
</template>

<script>
	import getWeekday from '../../utils/getweek.js'
	/**
		 * 获取任意时间
		 */
		function getDate(date, AddDayCount = 0) {
			if (!date) {
				date = new Date()
			}
			if (typeof date !== 'object') {
				date = date.replace(/-/g, '/')
			}
			const dd = new Date(date)
	
			dd.setDate(dd.getDate() + AddDayCount) // 获取AddDayCount天后的日期
	
			const y = dd.getFullYear()
			const m = dd.getMonth() + 1 < 10 ? '0' + (dd.getMonth() + 1) : dd.getMonth() + 1 // 获取当前月份的日期，不足10补0
			const d = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate() // 获取当前几号，不足10补0
			return {
				fullDate: y + '-' + m + '-' + d,
				year: y,
				month: m,
				date: d,
				day: dd.getDay()
				
			}
		}
	export default {
		data() {
			return {
				info: {
					lunar: true,
					range: true,
					insert: false,
					selected: []
				},
				calendarList:[],
				currentDate:getDate().fullDate,
				week:getDate().day,
				timeList:[
					{start:'00:00',end:'00:00',status:true}
				],
				start:'',
				end:'',
				range:[
					{text:'08:00',value:'08:00'},
					{text:'09:00',value:'09:00'},
					{text:'10:00',value:'10:00'},
					{text:'11:00',value:'11:00'},
					{text:'12:00',value:'12:00'},
					{text:'13:00',value:'13:00'},
					{text:'14:00',value:'14:00'},
					{text:'15:00',value:'15:00'},
					{text:'16:00',value:'16:00'},
					{text:'17:00',value:'17:00'},
					{text:'18:00',value:'18:00'}
				]
			};
		},
		computed:{
			weekday(){
				// let day =this.week
				// switch(){
				// 	case 0:
				// 		day = '周日'
				// 		break;
				// 	case 0:
				// 		day = '周日'
				// 		break;
				// 	case 0:
				// 		day = '周日'
				// 		break;
				// 	case 0:
				// 		day = '周日'
				// 		break;
				// }
				console.log(getWeekday(this.week))
				return getWeekday(this.week)
			}
		},
		onLoad(options){
			console.log(options,'ooooo')
			if(options.date_time){
				let d = options.date_time.split(',')
				let res = []
				d.forEach(item=>{
					res.push({date:item,info:'可约'})
				})
				this.info.selected = res
				console.log(this.info.selected,'ddss')
			}
			if(options.time){
				this.timeList = JSON.parse(options.time||'')
				console.log(this.timeList[0])
				this.timeList.forEach(item=>{
					item.status = JSON.parse(item.status||'')
				})
				
				
				
				// let res = []
				// d.forEach(item=>{
				// 	res.push({date:item,info:'可约'})
				// })
				// this.info.selected = res
				// console.log(this.info.selected,'ddss')
			}
		},
		methods:{
			change(e){
				console.log(e.fulldate)
				this.currentDate = e.fulldate
				this.info.selected.push({date:e.fulldate,info:'可约'})
				// this.info.selected=Array.from(new Set(this.info.selected))
				const map = new Map()
				// const newArr = arrObj.filter(v => !map.has(v.id) && map.set(v.id, v));
				// const newArr = [...new Map(arrObj.map((v) => [v.id, item])).values()];
				this.info.selected = this.info.selected.filter(v => !map.has(v.date) && map.set(v.date, v));
			},
			changeTime(index){
				
			},
			delTime(index){
				this.timeList.splice(index,1)
			},
			addTime(){
				this.$refs.popup.open()
			},
			changeTimeStart(time){
				console.log(time)
				this.start = time
			},
			changeTimeEnd(time){
				console.log(time)
				this.end = time
			},
			confirm(){
				this.timeList.push({start:this.start,end:this.end,status:true})
			},
			goBack(){
				uni.navigateBack({
					delta:1
				})
			},
			saveTime(){
				// 获取当前页面栈实例（最后一个元素为当前页）
				let pages = getCurrentPages()
				// 上一页
				let prevPage = pages[pages.length-2]
				// 给上一页面实例绑定getValue()方法和参数（注意$vm)
				console.log(prevPage,'pre')
				prevPage.$vm.getValue({selected:this.info.selected,time:this.timeList})
				uni.navigateBack({
					delta:1
				})
			}
		}
	}
</script>

<style lang="scss">
.time-set{
	width: 100%;
	height: 100%;
	position: relative;
	.canlendar{
		
	}
	.ban{
		width: 100%;
		background: #fff;
		text-align: center;
		padding: 20rpx;
		// border: 1px solid #000;
		margin: 20rpx auto;
		
	}
	.bans{
		.time{
			margin-bottom: 30rpx;
			position: relative;
			.uni-icons{
				position: absolute;
				right: 30rpx;
			}
		}
		.time-list{
			.list-item{
				display: flex;
				align-items: center;
				justify-content: center;
				.left{
					text{
						border: 1px solid #eee;
						padding: 10rpx;
					}
				}
				.right{
					display: flex;
					align-items: center;
					margin-left: 30rpx;
				}
			}
		}
		.set{
			margin: 30rpx auto;
			color: #1E90FF;
			text{
				margin: 0 10rpx;
			}
		}
	}
	.btns{
		width: 100%;
		height: 80rpx;
		display: flex;
		align-items: center;
		position: fixed;
		bottom: 0;
		color:#fff;
		.back{
			height: 80rpx;
			line-height: 80rpx;
			flex: 1;
			background: red;
			text-align: center;
		}
		.save{
			height: 80rpx;
			line-height: 80rpx;
			flex: 1;
			background: #1E90FF;
			text-align: center;
		}
	}
	.time-box{
		padding: 30rpx 50rpx;
		.df{
			display: flex;
			align-items: center;
			justify-content: space-between;
			line-height: 100rpx;
		}
	}
}
	
</style>
